<template>

	<view class="guess_your_like">
		<view class="contain">
			<navigator :url="navUrl(item)" class="guess_your_like_item" v-for="(item,index) in twoColGoodList" :key="index">
				<image class="guess_your_like_image" :src="item.pic" mode="aspectFill"></image>
				<view class="guess_your_like_text_c">
					<text class="name">{{item.name}}</text>
					<view class="price_c">
						<text class="price">¥{{item.price}}元</text>
						<text>乐居</text>
					</view>
				</view>
			</navigator>
			<view class="line">

			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"TwoColGoodList",
		data() {
			return {
				
			};
		},
		methods:{
			cc() {
				console.log(this.twoColGoodList);
			}
		},
		props:["twoColGoodList"],
		computed:{
			navUrl() {
				return function (item) {
					const url = `/pages/goodsDetail/goodsDetail?id=${item.id}`
					return url
				}
			}
		}
	}
</script>

<style lang="scss">
	.guess_your_like {
		.contain {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			width: 95%;
			margin: auto;
			.guess_your_like_item {
				width: 324rpx;
				margin: auto;
				.guess_your_like_image {
					width: 324rpx;
					height: 240rpx;
				}
				.guess_your_like_text_c {
					box-sizing: content-box;
					padding: 18rpx;
					.name {
						display: block;
						width: 100%;
						height: 60rpx;
						text-overflow: ellipsis;
						white-space: nowrap;
						overflow: hidden;
						font-size: $uni-font-size-sm;
						font-weight: 600;
						
					}
					
					.price_c {
						display: flex;
						justify-content: space-between;
						font-size: $uni-font-size-sm;
						
					}
				}
			}
			.line {
				width: 324rpx;
				height: 0;
			}
		}
		
	}
</style>
